<template>
  <div class="scenery_main" :loading="loading">
    <a-card title="硒都景色" style="height: 100%">
      <a-menu
        id="dddddd"
        style="width: 256px; height: 100%"
        v-model:selectedKeys="selectedKeys"
        mode="inline"
        @click="handleClick"
      >
        <a-menu-item v-for="item in viewListData" :key="item.id">
          {{ item.name }}
        </a-menu-item>
      </a-menu>
      <div class="scenery_message">
        <a-card hoverable>
          <template #cover>
            <img
              alt="example"
              :src="isActiveMessage?.imageUrl"
							style="max-width:70em"
            />
          </template>
          <a-card-meta :title="isActiveMessage?.name">
            <template #description>
							<p>{{isActiveMessage?.level}}</p>
							<p>地址：{{isActiveMessage?.address}}</p>
							<span>{{isActiveMessage?.description}}</span>
						</template>
          </a-card-meta>
        </a-card>
      </div>
    </a-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import { viewList } from "@/utils/fetch/api";
export default defineComponent({
  components: {},
  setup() {
    const loading = ref<Boolean>(false);
    const viewListData = ref<any>();
    const refresh = async () => {
      try {
        const data = await viewList({ pageNum: 1 });
        viewListData.value = data.data.data;
        handleClick({ key: selectedKeys.value[0] });
      } catch (err) {
        console.error(err);
      }
    };

    const selectedKeys = ref<Number[]>([1]);
    const handleClick = (num: any) => {
      viewListData.value.forEach((item: any) => {
        if (num.key == item.id) {
          isActiveMessage.value = item;
          return;
        }
      });
			console.log(isActiveMessage.value)
    };

    const isActiveMessage = ref<any>();

    onMounted(() => {
      loading.value = true;
      refresh();
      loading.value = false;
    });
    return {
      loading,
      viewListData,
      selectedKeys,
      handleClick,
      isActiveMessage,
    };
  },
});
</script>

<style lang="less" scoped>
.scenery_main {
  width: 100%;
  height: 100%;
  background: white;
  /deep/.ant-card {
    .ant-card-head-title {
      font-size: 3em;
    }
    .ant-card-body {
      height: 100%;
      display: flex;
    }
  }
  .scenery_message {
		height: auto;
    padding: 20px;
		.ant-card{
			display: flex;
			flex-direction: column;
    	align-items: center;
		}
  }
  /deep/.ant-menu-title-content {
    font-size: 1.5em;
  }
}
</style>
